<template>
  <ele-page flex-table style="padding: 0 0 0 5px;">
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      v-model:selections="selections"
      row-key="product_id"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      :pagination="false"
      highlight-current-row
      :default-expand-all="false"
      cache-key="MchArchivesWarehouseLocTable"
    >
      <template #toolbar>
        <div class="flex-a">
          <el-form class="flex" :label-width="0" @keyup.enter="reload">
            <el-form-item class="mb-0!" label="商品信息" label-width="80px">
              <el-input v-model="form.keyword" clearable placeholder="搜索商品信息" class="w-250px" />
            </el-form-item>

            <el-form-item class="mx-20px mb-0!" label="">
              <el-checkbox v-model="form.is_stock" :true-value="1" :false-label="0" label="仅显示库存商品" />
            </el-form-item>
            <el-form-item class="mb-0!" label="">
              <el-button type="primary" @click="reload">
                查询
              </el-button>
              <el-button @click="reset">
                重置
              </el-button>
            </el-form-item>
          </el-form>

          <el-divider class="mx-20px" direction="vertical" />
          <el-button type="primary" plain @click="move(null)">商品移库</el-button>
        </div>
      </template>
      <template #product_name="{ row }">
        <el-link type="primary" underline="never" @click="openStockLog(row)">{{ row.product_name }}</el-link>
      </template>
      <template #action="{ row }">
        <el-link type="primary" underline="never" @click="move(row)">移库</el-link>
      </template>
    </ele-pro-table>

    <PageMove v-model="showMove" :data="productSelections" :warehouseId="props.warehouseId" @done="reload" />

    <StockLog v-model="stockLog.show" :data="stockLog.data" :warehouseId="props.warehouseId" />
  </ele-page>
</template>

<script setup>
import StockLog from '@/components/Common/StockLog.vue'
import { ref } from 'vue'
import PageMove from './move.vue'

const props = defineProps({
  locationId: Number,
  warehouseId: Number,
})

const showMove = ref(false)

/** 表格实例 */
const tableRef = useTemplateRef('tableRef')

/** 表格选中数据 */
const selections = ref([])

const productSelections = ref([])

/** 表单数据 */
const { form, resetFields } = utils.useFormData({
  keyword: '',
  is_stock: 0,
})

const current = ref(false)
const stockLog = reactive({
  show: false,
  data: null,
})

function openStockLog(row) {
  stockLog.data = row ?? null
  stockLog.show = true
}

/** 表格列配置 */
const columns = ref([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 40,
    align: 'center',
    fixed: 'left',
    showOverflowTooltip: false,
  },
  {
    type: 'index',
    label: '序',
    width: 55,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'product_name',
    label: '商品名称',
    minWidth: 120,
    slot: 'product_name',
  },
  {
    prop: 'product_code',
    label: '商品编码',
    align: 'center',
  },
  {
    prop: 'location_name',
    label: '库位名称',
    align: 'center',
  },
  {
    prop: 'stock',
    label: '库存',
    align: 'center',
  },
  {
    columnKey: 'action',
    label: '操作',
    align: 'center',
    slot: 'action',
    fixed: 'right',
    width: 100,
  },
])

/** 表格数据源 */
async function datasource({ where, orders }) {
  return utils.get('/common/locationToProduct', { ...where, ...orders, id: props.locationId })
}

/** 搜索 */
function reload() {
  selections.value = []
  tableRef.value?.reload?.({ where: form })
}

function reset() {
  resetFields()
  reload()
}

function move(row) {
  const list = row ? [row] : selections.value
  productSelections.value = utils.cloneDeep(list)
  showMove.value = true
}

// 监听字典id变化
watch(
  () => props.locationId,
  () => {
    reload({})
  },
)
</script>
